<template>
  <div :style="{ width }" class="analysis-pie">
    <div ref="chartRef" :style="{ width: '100%', height: height }"></div>
  </div>
</template>
<script lang="ts" setup>
  import { Ref, ref, watch } from 'vue';
  import { useECharts } from '/@/hooks/web/useECharts';
  import { PieChartDataItem } from '../indexInsurance.data';

  const props = defineProps({
    loading: Boolean,
    width: {
      type: String,
      default: '100%',
    },
    height: {
      type: String,
      default: '400px',
    },
    title: {
      type: String,
      default: '',
    },
    data: {
      type: Array<PieChartDataItem>,
      default: () => [],
    },
  });

  const chartRef = ref<HTMLDivElement | null>(null);
  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
  watch(
    () => props.data,
    () => {
      if (!props.data || props.data.length === 0) {
        return;
      }
      const data = props.data.map((item) => {
        return {
          name: item.tag,
          value: item.amt,
        };
      });
      setOptions({
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c} ({d}%)',

          // formatter: '{a}:{b}:{c}:{d}%',
        },
        title: {
          text: props.title || '比例',
          left: 10,
          textStyle: {
            color: '#333',
          },
        },

        series: [
          {
            type: 'pie',
            radius: '80%',
            center: ['50%', '60%'],
            data: data,
            // label: {
            //   formatter: '{b} <br/>{c} ({d}%)',
            // },

            animationType: 'scale',
            animationEasing: 'exponentialInOut',
            animationDelay: function () {
              return Math.random() * 400;
            },
          },
        ],
      });
    },
    { immediate: true }
  );
</script>
<style lang="less" scoped></style>
